<script setup></script>

<template>
  <div>
    <el-container class="main-container">
      <el-aside width="200px"></el-aside>

      <el-main>
        <el-row>
          <el-col :span="18">
            <el-card class="main">
              <div class="card-content">
                <div style="font-size: 40px">
                  Are you ready to design the ultimate getaway spot?
                </div>
                <div>
                  Think about your perfect vacation: Is it a cozy cabin in the
                  mountains, a luxurious beach house, or a futuristic city
                  apartment? Use your creativity to bring this dream to life and
                  show us what your ideal vacation rental looks like.
                </div>
              </div>
              <img
                src="https://ideascdn.lego.com/media/generate/lego_ci/a6142b37-3ff8-4d8b-b778-00cdbff6de22/resize_to_fill:570:380/webp"
              />

              <Comment
                avatar="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTd4vzbdQuY698IvTNXJNA23kow1LPPNSa2Jg&s"
                username="tsiliegirl"
                text="Nicely done! 😁"
                :votes="1"
                time="about 12 hours ago"
              />
              <Comment
                avatar="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTd4vzbdQuY698IvTNXJNA23kow1LPPNSa2Jg&s"
                username="tsiliegirl"
                text="Nicely done! 😁"
                :votes="1"
                time="about 12 hours ago"
              />
              <Comment
                avatar="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTd4vzbdQuY698IvTNXJNA23kow1LPPNSa2Jg&s"
                username="tsiliegirl"
                text="Nicely done! 😁"
                :votes="1"
                time="about 12 hours ago"
              />
            </el-card>
          </el-col>

          <el-col :span="6">
            <el-card class="user" :body-style="{ padding: '0px' }">
              <div class="user-avatar">
                <el-avatar
                  :size="50"
                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTd4vzbdQuY698IvTNXJNA23kow1LPPNSa2Jg&s"
                ></el-avatar>
                <span style="color: white; padding-left: 10px">by ck</span>
              </div>
              <div class="icon-list">
                <el-row>
                  <el-col :span="24">
                    <div class="icon-item" @click="toggleLike">
                      <svg
                        t="1718945802909"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2845"
                        width="24"
                        height="24"
                      >
                        <path
                          d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z"
                          p-id="2846"
                        ></path>
                      </svg>
                      <span>4 likes</span>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="icon-item">
                      <svg
                        t="1718945802909"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2845"
                        width="24"
                        height="24"
                      >
                        <path
                          d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z"
                          fill="#000000"
                          p-id="2846"
                        ></path>
                      </svg>
                      <span>3 comments</span>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="icon-item">
                      <svg
                        t="1718945802909"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2845"
                        width="24"
                        height="24"
                      >
                        <path
                          d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z"
                          fill="#000000"
                          p-id="2846"
                        ></path>
                      </svg>
                      <span>Save entry</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>

      <el-aside width="200px"></el-aside>
    </el-container>
  </div>
</template>

<script>
import Comment from "@/components/comment.vue";

export default {
  data() {
    return {
      activeIndex: "",
      isLiked: false,
    };
  },
  methods: {
    toggleLike() {
      console.log("实现了点击");
      this.isLiked = !this.isLiked;
    },
    handleSelect(key) {
      console.log("key", key);
      this.$router.push({ path: "/", query: { key: key } });
    },
  },
  components: {
    Comment,
  },
  mounted() {
    window.scrollTo(0, 0); // 页面加载时滚动到顶部
  },
};
</script>

<style scoped>
.header {
  margin: 0;
  padding: 0;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.spacer {
  height: 60px; /* 这里的高度应与导航栏的高度一致 */
}
.main-container {
  top: 10px;
}
.main {
  width: 100%;
}
.user {
  width: 100%;
  height: 220px;
  margin: 0 10px 10px 10px;
}
.user-avatar {
  width: 100%;
  height: 100px;
  background-color: #1f2d3d;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-list {
  padding: 10px;
}
.icon-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.icon {
  margin-right: 10px;
  fill: red;
}
.icon-liked {
  fill: red;
}
</style>
